<template>
  <div class="login">
    <van-nav-bar title="登录" />
    <van-cell-group>
      <van-field
        v-model="mobile"
        required
        label="手机号"
        placeholder="请输入手机号"
        :error-message="mobile_errmsg"
        @input="validate"
      />
      <van-field
        v-model="code"
        required
        label="短信验证码"
        placeholder="请输入短信验证码"
        :error-message="code_errmsg"
        @input="validate"
      >
        <template #button>
          <van-button size="small" type="primary" @click="sendCode">发送验证码</van-button>
        </template>
      </van-field>
    </van-cell-group>
    <div class="btn-wrap">
      <van-button type="info" @click="login">登录</van-button>
      <van-button type="primary" @click="getInfo">获取个人资料</van-button>
    </div>
  </div>
</template>

<script>
import { reqsendCode, reqLogin } from '@/api/user'
import { mapMutations } from 'vuex'
export default {
  name: 'login',
  data () {
    return {
      mobile: '15256136096',
      code: '246810',
      // 输入框校验
      mobile_errmsg: '',
      code_errmsg: ''
    }
  },
  methods: {
    ...mapMutations('user', ['setTokenInfo']),
    /**
     * 验证码请求
     */
    async sendCode () {
      try {
        await reqsendCode(this.mobile)
        // console.log('发送验证码成功') 后台能看见，要提示用户
        this.$toast('发送验证码成功')
      } catch (err) {
        this.$toast(err.response.data.message)
        // console.dir(err) 打印出对象
        // console.log(err.response.data.message) 后台能看见，要提示用户
      }
    },
    /**
     * 登录请求
     */
    async login () {
      if (!this.validate()) return

      this.$toast.loading({
        duration: 0, // 持续展示 toast,永远不会关闭
        overlay: true, // 整体添加一个遮罩
        message: '加载中...',
        forbidClick: true
      })
      try {
        const res = await reqLogin(this.mobile, this.code)
        this.$toast('登录成功')
        console.log(res)
        // 登录成功后需要存token信息
        // 方法一：原生
        // this.$store.commit('user/ setToken', res.data)
        // 方法二：辅助函数
        this.setTokenInfo(res.data)
        // 登录成功后跳转
        this.$router.push('/')
      } catch (err) {
        console.log(err)
        this.$toast(err.response.data.message)
      }
    },
    /**
     * 获取个人资料请求
     * 发送请求失败，响应回来的是【用户身份信息缺失】
     */
    // async getInfo () {
    //   await reqInfo()
    // },
    // 封装校验方法
    validate () {
      if (this.mobile.trim() === '') {
        this.mobile_errmsg = '手机号要符合11位数字要求'
        return false
      }
      if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
        this.mobile_errmsg = '手机号码格式不对'
        return false
      }
      // 错误信息清除
      this.mobile_errmsg = ''
      if (this.code.trim() === '') {
        this.code_errmsg = '验证码不能为空'
        return false
      }
      if (!/^\d{6}$/.test(this.code)) {
        this.code_errmsg = '验证码格式不对'
        return false
      }
      // 错误信息清除
      this.code_errmsg = ''
      return true
    }
  }

}

</script>

<style lang='scss' scoped>
.btn-wrap{
  .van-button{
    width: 100%;
    border-radius: 10px;
  }
}
</style>
